import 'package:flutter/material.dart';

class MePage extends StatelessWidget {
  const MePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFEDEDED),
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        toolbarHeight: 0, // Hide AppBar but keep status bar color
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // Header
            Container(
              color: Colors.white,
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
              child: Row(
                children: [
                  Container(
                    width: 64,
                    height: 64,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      image: const DecorationImage(
                        image: AssetImage('assets/images/1.jpg'), // User's avatar
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  const SizedBox(width: 20),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'Sean',
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 12),
                        Row(
                          children: [
                            const Text(
                              'WeChat ID: wxid_sean',
                              style: TextStyle(color: Colors.grey, fontSize: 14),
                            ),
                            const Spacer(),
                            const Icon(Icons.qr_code, color: Colors.grey, size: 18),
                            const SizedBox(width: 12),
                            const Icon(Icons.arrow_forward_ios, color: Colors.grey, size: 16),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 8),

            // Services
            _buildListItem(Icons.payment, 'Services', iconColor: Colors.green),
            const SizedBox(height: 8),

            // Favorites & Sticker Gallery
            _buildListItem(Icons.favorite_border, 'Favorites', iconColor: Colors.red),
            const Divider(height: 1, indent: 56),
            _buildListItem(Icons.emoji_emotions_outlined, 'Sticker Gallery', iconColor: Colors.orange),
            const SizedBox(height: 8),

            // Settings
            _buildListItem(Icons.settings_outlined, 'Settings', iconColor: Colors.blue),
          ],
        ),
      ),
    );
  }

  Widget _buildListItem(IconData icon, String title, {Color? iconColor}) {
    return Container(
      color: Colors.white,
      child: ListTile(
        leading: Icon(icon, color: iconColor, size: 24),
        title: Text(title),
        trailing: const Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey),
        onTap: () {},
      ),
    );
  }
}
